<template>
     <div v-if="skeleton" class="box_matters">
         <div @click="view_" class="title">
                       <span
                               :class="{'pull_down':true,'pull_down_':'',
                                        'pull_down_b': $store.state.nowTime==='moon' ? '' : '#8f8c8c',}">
                       </span>
             <img :src="love_list.statue===0 ? '/img/common/love_no.png':'/img/common/love_yes.png' " alt="">
             {{love_list.content}}
             <img :src="love_list.img" alt="">
         </div>
         <div class="detail"
              :class="{'detail_y': view_t,'detail_n': view_b, 'global_font':$store.state.nowTime==='moon'}">
              {{love_list.statue===1 ? '已完成':'未完成'}}
         </div>
     </div>
  <div v-else class="title ">
     <div class="circle">
         <CircleLoading :outer="'2rem'" :inner="'1rem'"></CircleLoading>
     </div>
  </div>

</template>

<script>
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "LoveMattersContent",
    components: {CircleLoading},
    props:{love_list:{type:Object},index:{type:Number}},
    data(){
        return{
            view_t:false,
            view_b:false,
            skeleton:false,
        }
    },
    mounted() {
        if(this.love_list){
            setTimeout(()=>{
                this.skeleton = true;
            },100*(this.index+1))
        }
    },
    watch:{
        love_list(newValue,oldValue){
            if(newValue != null){
                this.love_list = newValue
                setTimeout(()=>{
                    this.skeleton = true;
                },100*(this.index+1))
            }
        }
    },
    methods:{
        view_(){
            if(this.view_b === false && this.view_t === false){
                this.view_t = true;
            }else{
                this.view_t = !this.view_t
                this.view_b = !this.view_b
            }

        }
    }
}
</script>

<style scoped>
.box_matters{
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    background: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}

.circle{
    width: 100%;
    height: 100%;
   display:flex;
    justify-content: center;
    align-items: center;
}
.title{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    animation: title_ .4s ease-out 0s 1 forwards;
}
@keyframes title_ {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
.detail{
    text-indent: 0.3rem;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    height: 0;
    overflow: hidden;
    color: #8f8c8c;
    border-top: 1px solid #8f8c8c;

}
.detail_y{
    animation: a_detail_y .3s ease-in-out 0s 1 forwards;
}
.detail_n{
    animation: a_detail_n .3s ease-in-out 0s 1 forwards;
}
@keyframes a_detail_y {
    0%{
        height: 0;
    }100%{
         height: 45px;
     }
}
@keyframes a_detail_n {
    0%{
        height: 45px;
    }100%{
         height: 0;
     }
}
.pull_down{
    position: absolute;
    right: 0;
    top: 33%;
    display: inline-block;
    width: 10px;
    height:10px;
    border: 2px solid #fcf9f9;
    border-top: 0;
    border-right: 0;
    transform-origin: center;
    transform: rotate(-45deg);
    transition: all 0.4s;
    z-index: 999;
    margin-right: 10px;
}
.pull_down_{
    transform: rotate(-225deg);
    margin-top: 2px;
}
.pull_down_b{
    border: 2px solid #8f8c8c;
    border-top: 0;
    border-right: 0;
}

img{
    margin:0 5px;
    width: 19px;
}
</style>